<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">用户信息</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片模版 -->
        <el-card class="box-card">
            <!-- 标签导航 -->
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="全部" name="全部"></el-tab-pane>
                <el-tab-pane label="待审核" name="待审核" :disabled='disabled'></el-tab-pane>
                <el-tab-pane label="审核通过" name="审核通过" :disabled='disabled'></el-tab-pane>
                <el-tab-pane label="审核失败" name="审核失败" :disabled='disabled'></el-tab-pane>
            </el-tabs>
            <!-- 表格模版，渲染用户信息 -->
            <el-table :data="UserInfo" stripe style="width: 100%" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="email" label="邮箱">
                </el-table-column>
                <el-table-column prop="phone" label="手机号">
                </el-table-column>
                <el-table-column prop="power" label="权限">
                </el-table-column>
                <el-table-column prop="date_joined" label="创建时间">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false" v-if="scope.row.auditing != 2">
                            <el-button type="primary" size="mini" @click="UpdateUser(scope.$index+1, scope.row)">
                                <i class="el-icon-edit"></i>
                            </el-button>
                        </el-tooltip>
                        <!-- 归档 -->
                        <el-tooltip class="item" effect="dark" content="归档" placement="top" :enterable="false" v-if="pid === '管理员'">
                            <el-button size="mini" type="danger" @click="DeleteUser(scope.$index+1, scope.row)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </el-tooltip>
                        <!-- 审核 -->
                        <el-tooltip class="item" effect="dark" content="审核" placement="top" :enterable="false" v-if="scope.row.auditing === 0">
                            <el-button size="mini" type="warning" @click="RefuseUser(scope.$index+1, scope.row)">
                                <i class="el-icon-setting"></i>
                            </el-button>
                        </el-tooltip>
                    </template>

                </el-table-column>

            </el-table>

            <template>
                <div class="block" style="text-align:center;margin-top:20px;">
                    <el-pagination @size-change="handleClick" @current-change="handleClick" :current-page.sync="page" :page-sizes.sync="pagesizes" :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total.sync="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
        <!-- 编辑用户信息弹窗 -->
        <el-dialog :visible.sync="UpdateUserDialog" width="25%" class="eldialog" center>
            <!-- 注册子组件 -->
            <UpdateUser :UserForm='UserForm' :PowerList='PowerList' />
        </el-dialog>

    </div>
</template>

<script>
import UpdateUser from '../subunit/UpdateUser'
import moment from 'moment'
import { user_info_get, admin_auditing_put, power_list_get, user_info_delete } from '../axios_api/api'
import { formatXml } from '../../config'
export default {
    data() {
        return {
            UserForm: {
                username: '',
                phone: '',
                power: '',
                company: '',
            },
            // 分页

            pagesizes: [10, 30, 50, 100],
            size: 10,
            total: 0,
            page: 1,

            activeName: '全部',
            disabled: '',
            // 用户信息列表
            UserInfo: [],
            // 权限列表
            PowerList: [],
            // 公司列表
            CompList: [],
            // 弹窗
            UpdateUserDialog: false,
            // 用户权限
            pid: localStorage.getItem('pid')
        }
    },
    components: {
        UpdateUser,
    },
    mounted() {
        this.get_power();
        this.handleClick();
        this.disabled = formatXml(this.disabled);
    },
    methods: {

        // 编辑
        UpdateUser(index, data) {
            this.UpdateUserDialog = true;
            this.UserForm = data
        },
        // 归档
        DeleteUser(index,data) {
            // 归档选择
            this.$confirm('归档操作', '操作提示', {
                confirmButtonText: '确认归档',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = { uid: data.id }
                user_info_delete(params).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                        this.$router.go(0)
                    } else {
                        this.$message.info(resp.message)
                    }
                })
            }).catch(() => {
                this.$message.info('取消归档操作')
            });
        },
        // 审核
        RefuseUser(index,datas) {
            // 审核选择
            this.$confirm('审核操作', '操作提示', {
                confirmButtonText: '通过审核',
                cancelButtonText: '拒绝注册',
                type: 'warning'
            }).then(() => {
                // 通过审核
                let data = { uid: datas, bear: '通过审核' }
                admin_auditing_put(data).then(resp => {
                    this.$message.success(resp.message)
                    this.handleClick();
                })

            }).catch(() => {
                // 拒绝审核
                this.$prompt('拒绝原因', '操作提示', {
                    confirmButtonText: '提交',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    let data = { uid: datas, bear: '拒绝申请', content: value }
                    admin_auditing_put(data).then(resp => {
                        this.$message.info(resp.message)
                        this.$router.go(0)
                    })
                }).catch(() => {
                    this.$message.info('取消本次审核')
                });
            });
				},
        // 获取用户列表
        handleClick() {
            let params = { activeName: this.activeName, token: localStorage['token'], page: this.page, size: this.size }
            user_info_get(params).then(resp => {
                if (resp.code === 200) {
                    // 遍历处理数据
                    for (let i = 0; i < resp.userinfo.length; i++) {
                        // 将时间处理为可读时间
                        resp.userinfo[i].date_joined = moment(resp.userinfo[i].date_joined).format('YYYY-MM-DD HH:mm:ss')
                        // 遍历将权限id转换成权限name
                        for (let j = 0; j < this.PowerList.length; j++) {
                            // 如果用户权限id与权限表id相同
                            if (resp.userinfo[i].power === this.PowerList[j].id) {
                                // 则将用户权限id修改成权限name
                                resp.userinfo[i].power = this.PowerList[j].pname
                            }
                        }
                        // 遍历将公司id改成公司name
                        for (let z = 0; z < this.CompList.length; z++) {
                            // 如果用户公司id与公司表id相同
                            if (resp.userinfo[i].company === this.CompList[z].id) {
                                // 将用户公司id修改成公司name
                                resp.userinfo[i].company = this.CompList[z].name
                            }
                        }
                    }
										this.UserInfo = resp.userinfo
										this.total = resp.total
                    console.log(resp)
                }
            })
        },
        // 获取权限及公司列表
        get_power() {
            power_list_get().then(resp => {
                if (resp.code === 200) {
                    // 给变量赋值
                    this.PowerList = resp.powerlist
                    this.CompList = resp.complist
                    console.log(this.PowerList)
                    console.log(this.CompList)
                }
            })
        }
    },
}
</script>

<style>
</style>